<template>
  this is tree view
  <ul>
    <TreeItem
      :model="model"
      class="tree-item"
      v-for="model in treeData"
    ></TreeItem>
  </ul>
</template>
<script setup>
import { reactive } from "vue";
import TreeItem from "../components/treeItem.vue";
// 数据信息
const treeData = reactive([
  {
    name: "Root",
    children: [
      { name: "level1-1" },
      { name: "level1-2" },
      {
        name: "level1-3",
        children: [
          {
            name: "level2-1",
            children: [{ name: "leve3-1" }],
          },
          { name: "level2-2" },
        ],
      },
    ],
  },
  {
    name: "Root2",
    children: [
      { name: "level1-1" },
      { name: "level1-2" },
      {
        name: "level1-3",
        children: [
          {
            name: "level2-1",
            children: [{ name: "leve3-1" }],
          },
          { name: "level2-2" },
        ],
      },
    ],
  },
]);
</script>
<style>
.tree-item {
  cursor: pointer;
  line-height: 1.5;
}
.bold {
  font-size: 18px;
  font-weight: bold;
}
</style>
